<template>
	<view class="zljc-container">
		<topNav
			class="home-top"
			title="提交并通知"
			:isUnderline="true"
			backgroundColor="#fe689b"
			color="#ffffff"
            :isCustomBackEvent="true"
			@backCallback="backCallback"
		></topNav>
		<view class="info-box">
			<view class="info-title">基本信息</view>
			<view class="info-other">
				<view class="info-rows">
					<view class="info-label">检查科室</view>
				</view>
				<view class="info-rows">
					<view class="info-item-text" @click="show = true">{{
						selectedKeshi || "请选择科室"
					}}</view>
				</view>
				<view class="info-rows">
					<view class="info-label">总分</view>
					<view class="info-colon">：</view>
					<view class="info-desc">25.0分，共27项</view>
				</view>
			</view>
		</view>
		<view class="list-content">
			<scroll-view
				class="list-container"
				scroll-y="true"
				:style="'height:524px;'"
			>
				<view class="list-item">
					<view class="list-left"> 1.住院号 </view>
					<view class="list-right"> </view>
				</view>
				<view class="list-item">
					<view class="list-left"> 1.诊断 </view>
					<view class="list-right"> </view>
				</view>
				<view class="list-item mulit">
					<view class="list-left">
						<view class="title">3.护理管理</view>
						<view class="sub-title-box">
							<view class="sub-row">
								<view
									class="sub-title"
									@click="
										itemClick('3.1 有完善的制度职责、流程')
									"
									>3.1 有完善的制度职责、流程</view
								>
								<view class="sub-score">1.0 / 1.0分</view>
							</view>
							<view class="sub-row">
								<view
									class="sub-title"
									@click="
										itemClick(
											'3.2 每月质控有记录、分析、反馈、改进'
										)
									"
									>3.2 每月质控有记录、分析、反馈、改进</view
								>
								<view class="sub-score">1.0 / 1.0分</view>
							</view>
							<view class="sub-row">
								<view
									class="sub-title"
									@click="
										itemClick('3.3 各部门检查有整改措施')
									"
									>3.3 各部门检查有整改措施</view
								>
								<view class="sub-score">1.0 / 1.0分</view>
							</view>
						</view>
					</view>
					<view class="list-right"></view>
				</view>
				<view class="list-item mulit">
					<view class="list-left">
						<view class="title">4.物品管理</view>
						<view class="sub-title-box">
							<view class="sub-row">
								<view
									class="sub-title"
									@click="
										itemClick(
											'4.1 物品器械完好备用专人管理'
										)
									"
									>4.1 物品器械完好备用专人管理</view
								>
								<view class="sub-score">1.0 / 1.0分</view>
							</view>
							<view class="sub-row">
								<view
									class="sub-title"
									@click="
										itemClick(
											'4.2 抢救车物品、器械、药品规定放置标记清楚'
										)
									"
									>4.2
									抢救车物品、器械、药品规定放置标记清楚</view
								>
								<view class="sub-score">1.0 / 1.0分</view>
							</view>
							<view class="sub-row">
								<view
									class="sub-title"
									@click="
										itemClick(
											'4.3 抢救仪器附有操作规程，定期测试维护'
										)
									"
									>4.3
									抢救仪器附有操作规程，定期测试维护</view
								>
								<view class="sub-score">1.0 / 1.0分</view>
							</view>
						</view>
					</view>
					<view class="list-right"></view>
				</view>
			</scroll-view>
		</view>
		<view class="operation-box" :style="'padding-bottom:' + bottom + 'px;'">
			<view class="submit">
				<u-button
					type="error"
					:plain="true"
					iconColor="#fe689b"
					text="提交"
					@click="submitEvent"
				></u-button>
			</view>
			<view class="defen">25</view>
			<view class="total">25分</view>
		</view>
		<u-picker
			:show="show"
			:columns="keshiList"
			:closeOnClickOverlay="true"
			@confirm="confirm"
			@close="show = false"
			@cancel="show = false"
		></u-picker>
		<u-popup
			:show="popShow"
			mode="center"
			:safeAreaInsetBottom="false"
			@close="popShow = false"
			:customStyle="{
				borderRadius: '32rpx',
				zIndex: '10',
				position: 'relative',
			}"
		>
			<view class="pop-container">
				<view class="pop-title">{{ activeObj.title }}</view>
				<u--form
					class="form-content"
					labelPosition="top"
					:model="popForm"
					ref="uForm"
				>
					<u-form-item class="form-label">
						<u-radio-group
							v-model="popForm.value1"
							placement="column"
							@change="groupChange"
						>
							<u-radio
								:customStyle="{ marginBottom: '8px' }"
								size="36"
								labelSize="36"
								label="是（1.0分）"
								name="是"
								@change="radioChange"
							>
							</u-radio>
							<u-radio
								:customStyle="{ marginBottom: '8px' }"
								size="36"
								labelSize="36"
								label="否（0.0分）"
								name="否"
								@change="radioChange"
							></u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item
						class="form-label"
						label="备注"
						labelWidth="160"
					>
						<u--textarea
							v-model="popForm.value2"
							type="textArea"
							height="120"
						></u--textarea>
					</u-form-item>
				</u--form>
				<view class="opera-box">
					<view class="btn btn-comfirm" @click="popShow = false"
						>取消</view
					>
					<view class="btn btn-comfirm" @click="popShow = false"
						>确定</view
					>
				</view>
			</view>
		</u-popup>
		<u-popup
			:show="tongzhiShow"
			mode="center"
			:safeAreaInsetBottom="false"
			@close="tongzhiShow = false"
			:customStyle="{
				borderRadius: '32rpx',
				zIndex: '10',
				position: 'relative',
			}"
		>
			<view class="pop-container">
				<view class="pop-title">选择需要通知的人</view>
				<view class="persion-form">
					<u--textarea
						v-model="toPersion"
						type="textArea"
						height="120"
					></u--textarea>
				</view>
				<view class="opera-box">
					<view class="btn btn-comfirm" @click="tongzhiShow = false"
						>取消</view
					>
					<view class="btn btn-comfirm" @click="submit">跳过</view>
					<view class="btn btn-comfirm" @click="submit">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapState } from "vuex";
export default {
	data() {
		return {
			query: {},
			keshiList: [["运营"]],
			keshi: "",
			show: false,
			selectedKeshi: "",
			form: {
				zhuyuanhao: "",
				zhenduan: "",
				31: "",
				32: "",
				33: "",
				41: "",
				42: "",
				43: "",
			},
			popShow: false,
			activeObj: {
				title: "3.1 有完善的制度职责、流程",
			},
			popForm: {
				value1: "",
				value2: "",
			},
			tongzhiShow: false,
			toPersion: "",
		};
	},
	onLoad(options) {
		this.query = options;
		console.log(this.query);
	},
	methods: {
		backCallback() {
			uni.navigateTo({
				url: `/pages/index/zljc/chooseRoom`,
			});
		},
		typeClick(item) {
			console.log(item);
		},
		confirm(indexs) {
			if (indexs.value.length > 0) {
				this.selectedKeshi = indexs.value[0];
			}
			this.show = false;
		},
		itemClick(text) {
			// this.activeObj.title = text;
			// this.popShow = true;
		},
		submitEvent() {
			this.tongzhiShow = true;
		},
		submit() {
			uni.navigateTo({
				url: `/pages/index/zljc/audit`,
			});
		},
	},
	computed: {
		...mapState({
			listHeight: (state) => {
				return (
					state.systemInfo.screenHeight -
					(state.systemInfo.top_topNav +
						uni.upx2px(276) +
						uni.upx2px(16) +
						uni.upx2px(42) +
						state.systemInfo.bottom)
				);
			},
			bottom: (state) => state.systemInfo.bottom,
		}),
	},
};
</script>

<style lang="scss" scoped>
.zljc-container {
	background-color: #f7f7f7;
	.info-box {
		background-color: #ffffff;
		color: #000000;
		height: 276rpx;
		.info-title {
			font-weight: bold;
			padding: 16rpx 48rpx;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
			font-size: 28rpx;
		}
		.info-other {
			padding: 16rpx 32rpx;
			.info-rows {
				display: flex;
				display: flex;
				font-size: 24rpx;
				line-height: 36rpx;

				.info-item-text {
					padding: 16rpx;
					background-color: #f7f7f7;
					width: 100%;
					border-radius: 16rpx;
					margin: 16rpx 0;
				}
				.info-desc {
					font-size: 32rpx;
				}
			}
		}
	}
	.list-content {
		margin-top: 16rpx;
		.list-container {
			.list-item {
				background-color: #ffffff;
				padding: 16rpx 32rpx;
				border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
				display: flex;
				justify-content: space-between;
				.list-left {
				}
				.list-right {
				}
			}
			.mulit {
				padding: 0 !important;
				.list-left {
					display: flex;
					flex: 1;

					.sub-title-box {
						flex: 1;
						.sub-row {
							display: flex;
							.sub-title {
								flex: 1;
								font-size: 28rpx;
								line-height: 42rpx;
								padding: 8rpx;
							}
							.sub-score {
								width: 156rpx;
								font-size: 24rpx;
								line-height: 42rpx;
								padding: 8rpx;
								position: relative;
							}
							.sub-score::after {
								position: absolute;
								content: "";
								width: 24rpx;
								height: 28rpx;
								top: 16rpx;
								right: 16rpx;
								background-image: url("@/static/images/my/icon_jump.png");
								background-repeat: no-repeat;
								background-size: 100% 100%;
							}
						}
						.sub-row + .sub-row {
							border-top: 2rpx solid rgba(0, 0, 0, 0.1);
						}
					}
				}

				.title {
					width: 42rpx;
					padding: 16rpx;
					border-right: 2rpx solid rgba(0, 0, 0, 0.1);
				}
			}
		}
	}

	.operation-box {
		display: flex;
		justify-content: space-between;
		position: fixed;
		width: 100vw;
		left: 0;
		bottom: 0;
		z-index: 10;
		border-top: 2rpx solid rgba(0, 0, 0, 0.1);
		.submit {
			flex: 1;
			font-size: 28rpx;
			line-height: 42rpx;
		}
		.defen {
			flex: 1;
			text-align: center;
			font-size: 42rpx;
			line-height: 80rpx;
		}
		.total {
			flex: 1;
			text-align: center;
			font-size: 42rpx;
			line-height: 80rpx;
		}
	}
}
.pop-container {
	width: calc(100vw - 64rpx);
	border-radius: 32rpx;
	overflow: hidden;

	.pop-title {
		color: #000000;
		font-size: 36rpx;
		line-height: 50rpx;
		font-weight: bold;
		text-align: center;
		padding: 32rpx 32rpx 16rpx;
		// border-bottom: 2rpx solid #e5e6e6;
	}

	.form-content {
		padding: 0 32rpx 32rpx;
		box-sizing: border-box;
	}

	.opera-box {
		display: flex;
		justify-content: center;
		border-top: 2rpx solid #e5e6e6;
		.btn {
			flex: 1;
			font-size: 36rpx;
			line-height: 80rpx;
			text-align: center;
			color: #000000;
		}
		.btn + .btn {
			border-left: 2rpx solid #e5e6e6;
		}
	}
}
::v-deep .u-form {
	padding: 0 32rpx 32rpx;
	box-sizing: border-box;
}

.persion-form {
	padding: 16rpx 32rpx;
}
</style>
